<template>
  <div class="col-md-8">
    <h3 class="reply">评论回复：</h3>
    <h2 v-if="commentList.length === 0">暂无评论，点击左侧添加评论！！！</h2>
    <ul class="list-group">
      <CommentItem
        v-for="comment in commentList"
        :key="comment.id"
        :comment="comment"
      ></CommentItem>
    </ul>
  </div>
</template>
<script>
import CommentItem from './CommentItem'
export default {
  name: 'CommentList',
  mounted() {
    this.$globalEventBind.$on('addComment', this.addComment)
    this.$globalEventBind.$on('delComment', this.delCommentById)
  },
  beforeDestroy() {
    this.$globalEventBind.$off('addComment', this.addComment)
    this.$globalEventBind.$off('delComment', this.delCommentById)
  },
  data() {
    return {
      commentList: [
        { id: 1, username: '张三', content: 'yyds' },
        { id: 2, username: '李四', content: 'react才是最好的' },
        { id: 3, username: '王五', content: '全职开发者' },
      ],
    }
  },
  methods: {
    addComment(username, content) {
      this.commentList.unshift({
        id: Date.now(),
        username: username.trim(),
        content: content.trim(),
      })
    },
    delCommentById(id) {
      console.log(id)
      this.commentList = this.commentList.filter((item) => item.id !== id)
    },
  },
  components: {
    CommentItem,
  },
}
</script>

<style scoped>
.reply {
  margin-top: 0px;
}
</style>
